<template>
  <div class="user-profile-container">
    <el-card class="summary-card">
      <template #header>
        <div class="card-header">
          <h2>用户行为总览</h2>
        </div>
      </template>
      <div class="summary-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="stat-item">
              <div class="stat-label">总用户数</div>
              <div class="stat-value">{{ summary.total_users }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="stat-item">
              <div class="stat-label">主要使用模式</div>
              <div class="stat-value">{{ summary.primary_usage_pattern }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="stat-item">
              <div class="stat-label">次要使用模式</div>
              <div class="stat-value">{{ summary.secondary_usage_pattern }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <h3>用户类型分布</h3>
            </div>
          </template>
          <div ref="userTypeChart" class="chart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <h3>活跃时段分布</h3>
            </div>
          </template>
          <div ref="timeRangeChart" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="user-list-card">
      <template #header>
        <div class="card-header">
          <h3>用户详细信息</h3>
        </div>
      </template>
      <el-table :data="userClassification" style="width: 100%">
        <el-table-column prop="user_id" label="用户ID" width="100" />
        <el-table-column prop="type" label="用户类型" width="200" />
        <el-table-column prop="behavior.login_frequency" label="登录频率" width="150" />
        <el-table-column prop="behavior.session_duration" label="会话时长" width="150" />
        <el-table-column prop="behavior.time_range" label="活跃时段" width="200" />
        <el-table-column label="常用设备">
          <template #default="scope">
            <el-tag
              v-for="device in scope.row.behavior.typical_devices"
              :key="device"
              class="device-tag"
              size="small"
            >
              {{ device }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

export default {
  name: 'UserProfile',
  setup() {
    const userTypeChart = ref(null)
    const timeRangeChart = ref(null)

    const userClassification = ref([
      {
        "type": "高频多设备用户（重度用户/管理员）",
        "description": "频繁登录，跨设备使用，时段覆盖全天",
        "user_id": 120,
        "behavior": {
          "login_frequency": "高（≥4次）",
          "session_duration": "中长（1-3小时）",
          "typical_devices": ["Windows", "Android", "Firefox"],
          "time_range": "全天分布"
        }
      },
      {
        "type": "高频多设备用户（重度用户/管理员）",
        "description": "频繁登录，跨设备使用，时段覆盖全天",
        "user_id": 122,
        "behavior": {
          "login_frequency": "高（≥4次）",
          "session_duration": "中长（1-3小时）",
          "typical_devices": ["Windows", "Android", "Firefox"],
          "time_range": "全天分布"
        }
      },
      {
        "type": "规律性工作用户（固定时段+长会话）",
        "description": "固定时段登录，会话持续时间长",
        "user_id": 117,
        "behavior": {
          "login_frequency": "中（3-4次）",
          "session_duration": "长（≥2小时）",
          "typical_devices": ["Windows", "Mac", "iPhone"],
          "time_range": "凌晨/上午（03:00-06:00）"
        }
      },
      {
        "type": "规律性工作用户（固定时段+长会话）",
        "description": "固定时段登录，会话持续时间长",
        "user_id": 118,
        "behavior": {
          "login_frequency": "中（3-4次）",
          "session_duration": "长（≥2小时）",
          "typical_devices": ["Windows", "Mac", "iPhone"],
          "time_range": "凌晨/上午（03:00-06:00）"
        }
      },
      {
        "type": "下午-晚间活跃用户（休闲/灵活办公）",
        "description": "下午至晚上活跃，移动端使用为主",
        "user_id": 119,
        "behavior": {
          "login_frequency": "中（3-4次）",
          "session_duration": "中（1-2小时）",
          "typical_devices": ["iOS", "Mac", "Windows"],
          "time_range": "下午至晚上（14:00-21:00）"
        }
      },
      {
        "type": "下午-晚间活跃用户（休闲/灵活办公）",
        "description": "下午至晚上活跃，移动端使用为主",
        "user_id": 121,
        "behavior": {
          "login_frequency": "中（3-4次）",
          "session_duration": "中（1-2小时）",
          "typical_devices": ["iOS", "Mac", "Windows"],
          "time_range": "下午至晚上（14:00-21:00）"
        }
      },
      {
        "type": "短会话临时用户（访客/测试）",
        "description": "会话时间极短，可能为临时访问",
        "user_id": 123,
        "behavior": {
          "login_frequency": "中（3-4次）",
          "session_duration": "短（<5分钟）",
          "typical_devices": ["Windows"],
          "time_range": "晚间（20:00-21:00）"
        }
      },
      {
        "type": "短会话临时用户（访客/测试）",
        "description": "会话时间极短，可能为临时访问",
        "user_id": 124,
        "behavior": {
          "login_frequency": "中（3-4次）",
          "session_duration": "短（<5分钟）",
          "typical_devices": ["Windows"],
          "time_range": "晚间（20:00-21:00）"
        }
      },
      {
        "type": "低频长会话用户（特定需求）",
        "description": "登录次数少但单次使用时间长",
        "user_id": 125,
        "behavior": {
          "login_frequency": "低（2-3次）",
          "session_duration": "长（≥2小时）",
          "typical_devices": ["Mac", "iOS", "Windows"],
          "time_range": "下午至凌晨（14:00-03:00）"
        }
      },
      {
        "type": "低频长会话用户（特定需求）",
        "description": "登录次数少但单次使用时间长",
        "user_id": 126,
        "behavior": {
          "login_frequency": "低（2-3次）",
          "session_duration": "长（≥2小时）",
          "typical_devices": ["Mac", "iOS", "Windows"],
          "time_range": "下午至凌晨（14:00-03:00）"
        }
      },
      {
        "type": "低频长会话用户（特定需求）",
        "description": "登录次数少但单次使用时间长",
        "user_id": 127,
        "behavior": {
          "login_frequency": "低（2-3次）",
          "session_duration": "长（≥2小时）",
          "typical_devices": ["Mac", "iOS", "Windows"],
          "time_range": "下午至凌晨（14:00-03:00）"
        }
      },
      {
        "type": "异常时段用户（特殊场景）",
        "description": "深夜/凌晨活跃，可能跨时区",
        "user_id": 128,
        "behavior": {
          "login_frequency": "中（3次）",
          "session_duration": "中长（1-3小时）",
          "typical_devices": ["Windows", "Mac", "iOS"],
          "time_range": "深夜至凌晨（23:00-03:00）"
        }
      },
      {
        "type": "异常时段用户（特殊场景）",
        "description": "深夜/凌晨活跃，可能跨时区",
        "user_id": 129,
        "behavior": {
          "login_frequency": "中（3次）",
          "session_duration": "中长（1-3小时）",
          "typical_devices": ["Windows", "Mac", "iOS"],
          "time_range": "深夜至凌晨（23:00-03:00）"
        }
      }
    ])

    const summary = ref({
      "total_users": 13,
      "primary_usage_pattern": "上午工作型（占比38.5%）",
      "secondary_usage_pattern": "晚间休闲型（占比23.1%）",
      "notable_characteristics": [
        "高频用户集中在120/122（管理员特征）",
        "117/118用户显示跨时区工作可能",
        "123/124用户需关注是否为测试流量"
      ]
    })

    onMounted(() => {
      // 用户类型分布图表
      const typeChart = echarts.init(userTypeChart.value)
      const typeOption = {
        title: {
          text: '用户类型分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}人 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'middle'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              formatter: '{b}: {c}人'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            data: [
              { value: 2, name: '高频多设备用户' },
              { value: 2, name: '规律性工作用户' },
              { value: 2, name: '下午-晚间活跃用户' },
              { value: 2, name: '短会话临时用户' },
              { value: 3, name: '低频长会话用户' },
              { value: 2, name: '异常时段用户' }
            ]
          }
        ]
      }
      typeChart.setOption(typeOption)

      // 活跃时段分布图表
      const timeChart = echarts.init(timeRangeChart.value)
      const timeOption = {
        title: {
          text: '24小时活跃度分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['0-3', '3-6', '6-9', '9-12', '12-15', '15-18', '18-21', '21-24'],
          axisLabel: {
            interval: 0
          }
        },
        yAxis: {
          type: 'value',
          name: '活跃用户数'
        },
        series: [
          {
            name: '活跃用户',
            type: 'bar',
            data: [4, 2, 1, 2, 3, 4, 3, 2],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            }
          }
        ]
      }
      timeChart.setOption(timeOption)

      // 监听窗口大小变化，调整图表大小
      window.addEventListener('resize', () => {
        typeChart.resize()
        timeChart.resize()
      })
    })

    return {
      userClassification,
      summary,
      userTypeChart,
      timeRangeChart
    }
  }
}
</script>

<style scoped>
.user-profile-container {
  padding: 20px;
}

.summary-card {
  margin-bottom: 20px;
}

.charts-row {
  margin-bottom: 20px;
}

.chart {
  height: 400px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.device-tag {
  margin-right: 5px;
}

.chart-card {
  margin-bottom: 20px;
}

.user-list-card {
  margin-bottom: 20px;
}
</style> 